<template>
	<view class="book_list">
		<view v-if="showHead" class="title">
			{{title}}
			<label v-text="subTitle"></label>
			<view class="more" v-if="isMore">更多></view>
		</view>
		<view class="item" v-for="(val,index) in list">
			<view class="img_box">
				<view class="ranking" :class="{one:index == 0,two:index == 1,three:index == 2}" v-if="isRanking">
					<view class="icon"><u-icon name="bookmark"></u-icon></view>
					TOP&nbsp;{{index+1}}
				</view>
				<!-- <image :src="val.url"></image> -->
				<u-lazy-load  :image="val.url" threshold="300" border-radius="6"></u-lazy-load>
			</view>
			<view class="info" @tap="tabinfo">
				<view class="name" v-text="val.name"></view>
				<view class="desc" v-text="val.desc"></view>
				<view class="info_foot">
					<view class="author">
						<view class="fa fa-user"></view>
						{{val.author}}
					</view>
					<label v-text="val.label"></label>
					<label class="red" v-text="val.state">连载中</label>
					<label class="blue" v-text="val.number"></label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["book", "ranking"],
		data() {
			return {
				isRanking: this.ranking || false,
				showHead: this.book.showHead,
				// 标题
				title: this.book.tit,
				// 副标题
				subTitle: this.book.subTit,
				//是否显示更多
				isMore: this.book.more,
				// 数据列表
				list: this.book.list
			}
		},
		onLoad() {

		},
		created() {

		},
		methods: {
			tabinfo() {
				this.$u.route({
					url: 'pages/book/bookinfo'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.book_list {
		.title {
			margin: 20rpx;
			padding: 0 10rpx;
			font-size: 32rpx;
			font-weight: 700;
			border-left: 2px solid #ed424b;
			position: relative;

			label {
				font-size: 28rpx;
				color: #999;
				margin-left: 10rpx;
			}

			.more {
				position: absolute;
				right: 20rpx;
				top: 50%;
				margin-top: -20rpx;
				line-height: 40rpx;
				color: #999;
			}
		}

		.item {
			// margin-left: 20rpx;
			margin: 20rpx;
			border-bottom: 1px solid #f0f1f2;
			font-size: 0;
			overflow: hidden;

			.img_box {
				position: relative;

				.ranking {
					position: absolute;
					left: -50rpx;
					top: 0;
					width: 100%;
					text-align: center;
					z-index: 888;
					color: #fff;
					transform: rotate(-45deg);
					background-color: #4284ed;
				}

				.ranking {
					font-size: 20rpx; 
					line-height: 30rpx;
					background-color: #969ba3;

					&.one {
						background-color: #e73500;
					}

					&.two {
						background-color: #f0643a;
					}

					&.three {
						background-color: #f0c53a;
					}
				}
			}

			.img_box,
			.info {
				vertical-align: middle;
				display: inline-block;
			}

			.img_box {
				width: 150rpx;
				height: 200rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.info {
				padding: 0 20rpx;
				width: calc(100% - 230rpx);

				.name {
					font-size: 32rpx;
					color: #333;
				}

				.desc {
					font-size: 26rpx;
					color: #969ba3;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.info_foot {
					position: relative;
					height: 40rpx;
					line-height: 40rpx;
					text-align: right;

					.author {
						position: absolute;
						left: 0;
						top: 0;
						line-height: 40rpx;
						color: #969ba3;

						.fa {
							margin-right: 10rpx;
						}
					}

					label {
						font-size: 20rpx;
						color: #999;
						margin-left: 10rpx;
						border: 1px solid #f0f1f2;
						padding: 0 10rpx;
						border-radius: 8rpx;

						&.red {
							color: #ed424b;
						}

						&.blue {
							color: #4284ed;
						}
					}
				}
			}
		}
	}
</style>